import React,{Component,Fragment} from "react";
// import React from 'react'
//const Component = React.Component
//const Fragment = React.Fragment  当外层需要一个div包裹 就如vue template一样
import './style.css'
import XiaojiejieItem from "./XiaojiejieItem";
import Boss from "./Boss";
import axios from 'axios'
import {CSSTransition,TransitionGroup} from 'react-transition-group'

class Xiaojiejie extends Component{
    //在某一时刻，可以自动执行的函数，相当于初始化
    constructor(props){
        super(props) //绑定父组件的值
        this.state = {
            inputValue:'',
            list:[]
        }
        this.inputChange = this.inputChange.bind(this)
        this.addList = this.addList.bind(this)
    }
    componentDidMount(){
        axios.get('http://rap2api.taobao.org/app/mock/292931/index').then(res=>{
            this.setState({
                list:res.data.list
            })
        })
    }
    render(){
        return(
            <Fragment>
                {/* 这是个注释 */}
                <div>
                    <label htmlFor="jspang">增加服务:</label>
                    <input 
                        className="input"  
                        value={this.state.inputValue} 
                        onChange={this.inputChange}
                        ref={(input)=>{this.input = input}}
                    /><button onClick={this.addList} id="jspang" >增加服务</button>
                </div>
                <ul ref={(ul)=>{this.ul = ul}}>
                    <TransitionGroup>
                        {
                        this.state.list.map((item,index)=>{
                            return (
                    // 父组件中的子组件, 父组件未Xiaojiejie，子组件未XiaojiejieItem， 父组件传值avname，content，index,key值给子组件
                    //                                                             子组件接受父组件 deleteItem方法，该方法为子组件向父组件传值，并调用， 
                                <CSSTransition classNames="box-text" unmountOnExit key={index+item} timeout={2000} appear >
                                    <XiaojiejieItem 
                                        avname=""
                                        content={item} 
                                        index= {index}
                                        deleteItem = {this.delList.bind(this)}
                                        key= {index+item}
                                        />
                                </CSSTransition>        
                
                            )
                                    
                        })
                        }
                    </TransitionGroup>
                </ul>
                <Boss/>
            </Fragment>
        )
    }
    inputChange(e){
        this.setState({
            inputValue:this.input.value
        })
    }
    addList(e){
        this.setState({
            inputValue:'',
            list:[...this.state.list,this.state.inputValue]
        },()=>{
            //在虚拟dom执行完成，setState处理完成，回调函数中执行 输出值4
            console.log(this.ul.querySelectorAll('li').length)
        })
        //虚拟dom 在生命周期和合成事件中表现为异步 输出值3
        console.log(this.ul.querySelectorAll('li').length)
    }
    delList(index,e){
        let list = this.state.list
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
}

export default Xiaojiejie